<template>
	<view class="container">
		<view class="audioLeft" @click="musicDetail">
			<view class="imgUrl">
				<img :src="audioPlayer.audioImg" alt="">
			</view>
			<view class="audioName">
				{{audioPlayer.audioName}}
				<p>横滑切换上下首哦</p>
			</view>
		</view>
		<view class="audioRight">
			<uni-icons custom-prefix="iconfont" type="icon-bofang" size="35" v-if="audioPlayer.playFlag"
				@click="playAudio"></uni-icons>
			<uni-icons custom-prefix="iconfont" type="icon-zanting" size="35" v-else @click="playAudio"></uni-icons>
			<uni-icons custom-prefix="iconfont" type="icon-caidan" size="35"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	// var that = this;
	const audios = uni.createInnerAudioContext();

	export default {
		name: "audioPlayer",
		data() {
			return {
				// playFlag: true
			};
		},
		components: {

		},
		mounted() {
			// audios.src = 'https://music.163.com/song/media/outer/url?id=' + this.$store.state.audioPlayer.audioId +'.mp3';
			uni.$on("playMusic", (e) => {
				this.playAudio()
			})
		},
		onUnload() {
			uni.$off("playMusic", (e) => {})
		},
		watch: {
			audioId: function() {
				audios.stop()
				this.updataIsbtnShow(true)
				this.playAudio()
			}
		},
		methods: {
			...mapMutations(['updataIsbtnShow']),

			musicDetail() {
				uni.navigateTo({
					url: '/pages/musicDetail/musicDetail'
				})
			},
			playAudio(e) {
				console.log(audios.paused);
				// console.log(audios);
				// console.log(audios.currentTime);
				var flag = this.$store.state.audioPlayer.playFlag
				console.log(flag);
				var audiosID = this.$store.state.audioPlayer.audioId;
				var audiosSrc = 'https://music.163.com/song/media/outer/url?id=' + audiosID + '.mp3';
				audios.autoplay = true;

				if (audios.paused == true) {
					audios.src = audiosSrc;
					this.updataIsbtnShow(false)
					audios.onPlay(() => {
						console.log('开始播放');
					});
					audios.onError((res) => {
						uni.showToast({
							title: '暂无该歌曲'
						})
						this.updataIsbtnShow(true)
					});
					audios.onEnded(() => {
						this.updataIsbtnShow(true)
					})
				} else {
					console.log('123');
					this.updataIsbtnShow(true)
					audios.pause()
					audios.onPause(() => {
						console.log('暂停播放');
						audios.startTime = audios.currentTime
					})
				}
				// if(flag == false) {
				// 	audios.stop()
				// 	console.log('no');
				// }else{
				// 	audios.play()
				// 	console.log('yes');
				// }
			}
		},
		computed: {
			...mapState(['audioPlayer', 'audioId'])
		},
	}
</script>

<style lang="less">
	.container {
		border-top: 2px solid #ccc;
		width: 750rpx;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		background-color: white;
		z-index: 999;
		display: flex;

		.audioLeft {
			width: 500rpx;
			height: 150rpx;
			display: flex;
			align-items: center;

			.imgUrl {
				width: 100rpx;
				height: 100rpx;
				margin-left: 40rpx;

				img {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

			.audioName {
				margin-left: 30rpx;
				font-size: 26rpx;
			}
		}

		.audioRight {
			width: 250rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: right;

			.iconfont {
				width: 60rpx;
				height: 60rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>
